<template>
  <view class="gamer-upload">

    <view>
      <view style="font-size: 28rpx;margin-bottom: 20rpx;margin-top: 40rpx;font-weight: bolder">
        选择上传图片 ↓
      </view>
      <u-upload @on-choose-complete="onChooseComplete" :auto-upload="false" width="690" height ="300" :custom-btn="true"  max-count="1">
        <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
          <u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
        </view>
      </u-upload>
    </view>

    <view>
      <u-button :custom-style="customStyle" shape="circle" @click="submit">上传照片</u-button>
    </view>
  </view>
</template>

<script>
import {pathToBase64} from "image-tools";
import {getGamerByUserId, uploadGamerImg} from "../../../../api/gamer";

export default {
name: "index",
  data() {
  return{
    img:'',
    customStyle1:{
      backgroundColor: '#f7f7f8',
      color: '#9a9a9a'
    },
    customStyle: {
      marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
      color: 'white',
      backgroundColor:'#10d169',
    },
    fileList:[{
      url:''
    }]

  }
  },
  methods:{
    onChooseComplete(lists) {
      pathToBase64(lists[0].url).then(data=>{
        this.img = data
      })
    },
    async submit() {

      if (!this.img){
        uni.showToast({
          title: '请点击上方相框上传图片',
          duration: 3000,
          icon:'none'
        });
        return
      }

      uni.showLoading({
        title: '上传中'
      });
      const res = await uploadGamerImg({
        imgs:[this.img],
      });

      const gamer = await getGamerByUserId({
        id: uni.getStorageSync('userInfo').id
      })
      uni.setStorageSync('gamerInfo', gamer.data.data);
      uni.hideLoading();
      uni.navigateBack({
        delta: 1
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.gamer-upload{
  min-height: 100vh;
  padding: 20rpx;
  .slot-btn {
    width: 710rpx;
    height: 300rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(244, 245, 246);
    border-radius: 10rpx;
  }

  .slot-btn__hover {
    background-color: rgb(235, 236, 238);
  }
}
</style>
